import React, { PureComponent } from 'react'
import { Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
import { LoginWrapper, LoginBox, Input, Button } from './style'
import { actionCreators } from './store'

class Login extends PureComponent {
  render () {
    const { isLogin, loginClick } = this.props

    if (!isLogin) {
      return (
        <LoginWrapper>
          <LoginBox>
            <Input 
              placeholder='账号' 
              innerRef={(input) => {this.account = input}} 
            />
            <Input 
              placeholder='密码' 
              type='password' 
              innerRef={(input) => {this.password = input}}
            />
            <Button onClick={() => loginClick(this.account, this.password)}>登陆</Button>
          </LoginBox>
        </LoginWrapper>
      )
    } else {
      return <Redirect to='/' />
    }

  }
}

const mapState = (state) => ({
  isLogin: state.getIn(['login', 'isLogin'])
})

const mapAction = (dispatch) => ({
  loginClick: (account, password) => {
    dispatch(actionCreators.loginInAction(account.value, password.value))
  }
}) 

export default connect(mapState, mapAction)(Login)
